
.button-wrap {
  width: 160px;
  margin: 40px auto 0;
  cursor: pointer;
}
.button-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.button-switch {
  position:relative;
  left:0px;
  width: 74px;
  height: 74px;
  border:solid 22px;
  border-radius: 36px;
  transition:all 0.2s ease;
}
.button-active .button-switch { left:80px; }
.button-on, 
.button-off {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:2.4em;
  font-weight:bold;
}
.button-on { margin-left:110px; }
.button-off { margin-left:30px; color:#dd2222; }
.button-active .button-off { color:#fff; }
.button-active .button-on { color:#22dd22; }
.button-active .button-bg { background-color:#000; }


/* BUTTON 1 */


.one .button-wrap {
  width: 120px;
  margin: 40px auto 0;
  cursor: pointer;
}
.one .button-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.one .button-switch {
  position:relative;
  left:0px;
  width: 64px;
  height: 44px;
  border:solid 13px;
  border-radius: 36px;
  transition:all 0.2s ease;
}
.one .button-active .button-switch { left:50px; }
.one .button-in, 
.one .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.one .button-in { margin-left:76px; }
.one .button-out { margin-left:18px; color:#dd2222; }
.one .button-active .button-out { color:#fff; }
.one .button-active .button-in { color:#22dd22; }
.one .button-active .button-bg { background-color:#000; }


/* BUTTON 2 */


.two .button-wrap {
  width: 120px;
  margin: 40px auto 0;
  cursor: pointer;
}
.two .button-bg {
  width: 100%;
  height: 100%;
  background-color: #ddd;
  border-radius: 0px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.two .button-active .button-bg {
  background-color: #22dd22;
}
.two .button-switch {
  position:relative;
  left:0px;
  width: 64px;
  height: 44px;
  border:solid 13px;
  border-radius: 0px;
  transition:all 0.2s ease;
}
.two .button-active .button-switch { left:50px; }
.two .button-in, 
.two .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.two .button-in { margin-left:76px; }
.two .button-out { margin-left:18px; color:#dd2222; }
.two .button-active .button-out { color:#fff; }
.two .button-active .button-in { color:#22dd22; }
.two .button-active .button-bg { background-color:#000; }


/* BUTTON 3 */


.three .button-wrap {
  width: 100px;
  margin: 40px auto 0;
  cursor: pointer;
}
.three .button-bg {
  width: 100%;
  height: 100%;
  background-color: #ddd;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.three .button-switch {
  position:relative;
  left:0px;
  width: 44px;
  height: 44px;
  border:solid 13px;
  background-color:#fff;
  border-radius: 36px;
  transition:all 0.2s ease;
}
.three .button-active .button-switch { left:50px; }
.three .button-in, 
.three .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.three .button-in { margin-left:76px; }
.three .button-out { margin-left:18px; }
.three .button-active .button-out {  }
.three .button-active .button-in {  }
.three .button-active .button-bg { background-color:#22bb22; }


/* BUTTON 4 */


.four .button-wrap {
  width: 100px;
  margin: 40px auto 0;
  cursor: pointer;
}
.four .button-bg {
  width: 100%;
  height: 100%;
  background-color: #bb2222;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.four .button-switch {
  position:relative;
  left:0px;
  width: 44px;
  height: 44px;
  border:solid 13px;
  background-color:#fff;
  border-radius: 36px;
  transition:all 0.2s ease;
}
.four .button-active .button-switch { left:50px; }
.four .button-in, 
.four .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.four .button-in { margin-left:76px; }
.four .button-out { margin-left:18px; }
.four .button-active .button-out {  }
.four .button-active .button-in {  }
.four .button-active .button-bg { background-color:#22bb22; }


/* BUTTON 5 */


.five .button-wrap {
  width: 120px;
  margin: 40px auto 0;
  cursor: pointer;
}
.five .button-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.five :hover.button-bg {
  color:#22dd22;
}
.five .button-active :hover.button-bg {

}
.five .button-switch {
  position:relative;
  left:0px;
  width: 64px;
  height: 44px;
  background-color:#fff;
  /*border:solid 13px;*/
  border-radius: 36px;
  transition:all 0.2s ease;
}
.five .button-active .button-switch { left:50px; }
.five .button-in, 
.five .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.five .button-in { margin-left:82px; }
.five .button-out { margin-left:12px; color:#dd2222; }
.five .button-active .button-out { color:#fff; }
.five .button-active .button-in { color:#22dd22; }
.five .button-active .button-bg { background-color:#000; }


/* BUTTON 6 */


.six .button-wrap {
  width: 100px;
  margin: 40px auto 0;
  cursor: pointer;
}
.six .button-bg {
  width: 100%;
  height: 100%;
  background-color: #ddd;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.six .button-switch {
  position:relative;
  left:0px;
  width: 44px;
  height: 44px;
  border-color:#bb2222;
  border-radius: 36px;
  transition:all 0.2s ease;
}
.six .button-active .button-switch { left:50px; border-color:#22bb22; }
.six .button-in, 
.six .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.six .button-in { margin-left:76px; }
.six .button-out { margin-left:18px; }
.six .button-active .button-out {  }
.six .button-active .button-in {  }
.six .button-active .button-bg {  }